<template>
  <div class="home3">
    <h2>doubleCounter: {{ $store.getters.doubleCounter }}</h2>
    <!-- <button @click="increamentLevle">修改level</button> -->
     <h2>frendsTotalAge: {{ $store.getters.frendsTotalAge }}</h2>
     <h2>message: {{ $store.getters.message }}</h2>
     <!--根据id获取某一个朋友信息-->
     <h2>获取id=100的朋友信息: {{ $store.getters.getFrendsById(100) }}</h2>
     <!--使用mapGetters的辅助函数-->
     <hr>
     <!-- <h2>使用mapGetters的辅助函数</h2>
     <h2>doubleCounter: {{ doubleCounter }}</h2>
     <h2>frendsTotalAge: {{ frendsTotalAge }}</h2>
     <h2>message: {{ message }}</h2>   
     <h2>获取id=100的朋友信息: {{ getFrendsById(101) }}</h2> -->

     <hr>
     <h2>setup中使用mapGetters</h2>
     <h2>方式一</h2>
     <h2>在setup中使用mapGetters</h2>
     <!-- <h2>message: {{ setupMessageBind }}</h2> -->
     <h2>方式二</h2>
     <h2>message: {{ message }}</h2>
     <!-- <h2>name: {{ $store.state.name }}</h2> -->
      <h2>level: {{ level }}</h2>
      <h2>name: {{ $store.state.name }}</h2>
     <button @click="changeName">修改name</button>
     <h2>message2: {{ message2 }}</h2>
  </div>
</template>

<!--option中使用mapGetters-->
<script>
import { mapGetters } from "vuex";

export default {

  computed: {
      ...mapGetters(['doubleCounter','frendsTotalAge']),
      ...mapGetters(['message', 'getFrendsById'])
  }

}
</script>

<!--setup中使用mapGetters-->
<script setup>
  import { useStore,mapState, mapGetters } from 'vuex'
  import { toRefs } from 'vue'
  import { computed } from "vue";
  import useState from "../hooks/useState.js";
  const store = useStore()

  // 方式一: 不推荐
  // const {message: setupFunMessage} = mapGetters(['message']) // 返回的是一个函数
  // console.log(setupFunMessage)
  // const setupMessageBind = computed(setupFunMessage.bind({$store: store}))
  // 方式二: 推荐
  const {message, level} = toRefs(store.getters) // [Vue warn] toRefs() expects a reactive object but received a plain one  [Vue 警告] toRefs（） 期望一个响应式对象，但收到了一个普通对象
  const message2 = computed(() => store.getters.message) // 使用computed包装,使其变成响应式对象

  function changeName() {
    // store.state.name = 'kobe' // 不推荐直接修改state中的数据
    store.commit('changeName', 'kobe')
    console.log(store.state.name)
  }
</script>

<style scoped>
</style>